<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('远程搜索/筛选')}`">{{ $t('远程搜索/筛选') }}</t>
            <li>
                配置<span class="s-code">remote</span>为<span class="s-code">true</span>，
                然后结合<span class="s-code">remoteMethod</span>来动态更新接口参数即可触发请求新的数据
            </li>
            <li>此处示例请求的接口是由本地json数据模拟的，查询结果不一致属于正常，你可以打开<span class="s-code">F12</span>查看接口请求情况</li>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'select',
            filterable: true,
            remote: true,
            remoteMethod: (keyword) => {
                props.requestConfig.params = { keyword };
            },
            optionProps: { value: 'id', label: 'name' },
            options: [],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>v-model 绑定值：{{ value }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'select',
            filterable: true,
            remote: true,
            remoteMethod: (keyword) => {
                props.requestConfig.params = { keyword };
            },
            optionProps: { value: 'id', label: 'name' },
            options: [],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
